JavaScript 基礎知識結構

1. 核心語法與基礎
   JavaScript 是一種動態、弱類型語言，運行於瀏覽器或伺服器（如 Node.js）。以下是必須掌握的核心概念：

變數與資料類型：

變數宣告：var（舊，函數作用域）、let（塊作用域）、const（塊作用域，不可重新賦值）。
基本類型：number、string、boolean、null、undefined、bigint、symbol。
參考類型：object（包括陣列 [] 和物件 {}）、function。
類型檢查：typeof 運算子。
示例：
javascriptlet name = "Alice"; // 字串
const age = 25; // 數字
let person = { id: 1, name: "Bob" }; // 物件

運算子與表達式：

算術：+、-、*、/、%。
比較：==（鬆散相等）、===（嚴格相等）、>、< 等。
邏輯：&&（與）、||（或）、!（非）。
三元運算子：condition ? value1 : value2。
示例：
javascriptlet x = 10;
console.log(x > 5 ? "大於 5" : "小於等於 5"); // 輸出：大於 5

控制流程：

條件語句：if...else、switch。
迴圈：for、while、do...while、ES6+ 的 for...of（迭代陣列）、for...in（迭代物件屬性）。
示例：
javascriptfor (let i = 0; i < 3; i++) {
console.log(i); // 0, 1, 2
}

函數：

定義：函數宣告 function name() {}、函數表達式 const name = function() {}、箭頭函數 () => {}（ES6）。
參數：預設參數、剩餘參數（...args）。
返回值：使用 return，未指定返回 undefined。
示例：
javascriptconst add = (a, b = 0) => a + b;
console.log(add(5, 3)); // 8
console.log(add(5)); // 5

2. 陣列與物件

陣列（Array）：

創建：let arr = [1, 2, 3]; 或 new Array(1, 2, 3);。
方法：push、pop、shift、unshift、map、filter、reduce、forEach。
示例：
javascriptlet numbers = [1, 2, 3];
let doubled = numbers.map(n => n * 2); // [2, 4, 6]
let evens = numbers.filter(n => n % 2 === 0); // [2]

物件（Object）：

創建：let obj = { key: value };。
存取：點記法 obj.key 或括號記法 obj["key"]。
方法：Object.keys()、Object.values()、Object.entries()。
示例：
javascriptlet user = { name: "Alice", age: 25 };
console.log(user.name); // Alice
Object.keys(user); // ["name", "age"]

3. DOM 操作
   JavaScript 在前端的核心用途是操作 DOM（Document Object Model），實現動態網頁。

選擇元素：

document.getElementById("id")：選取單個 ID。
document.querySelector(".class")：選取第一個匹配的元素（CSS 選擇器）。
document.querySelectorAll(".class")：選取所有匹配元素。
示例：
javascriptlet btn = document.querySelector("#myButton");

修改元素：

內容：element.textContent、element.innerHTML。
屬性：element.setAttribute("name", "value")、element.classList.add("class")。
樣式：element.style.property = "value";。
示例：
javascriptbtn.textContent = "點我！";
btn.style.backgroundColor = "blue";

創建與刪除：

創建：document.createElement("tag")。
添加：parent.appendChild(element)。
移除：element.remove()。
示例：
javascriptlet div = document.createElement("div");
div.textContent = "新元素";
document.body.appendChild(div);

4. 事件處理
   JavaScript 通過事件處理實現用戶交互。

添加事件監聽器：

element.addEventListener("event", callback)。
常見事件：click、mouseover、input、submit。
示例：
javascriptbtn.addEventListener("click", () => {
alert("按鈕被點擊！");
});

事件物件：

事件回調函數接收事件物件（如 event 或 e），包含 target、key 等屬性。
示例：
javascriptdocument.querySelector("input").addEventListener("input", e => {
console.log(e.target.value); // 輸入框的值
});

事件冒泡與捕獲：

冒泡（預設）：事件從目標元素向上傳播。
捕獲：事件從外層向下傳播（設置 addEventListener("click", fn, { capture: true })）。
阻止冒泡：event.stopPropagation()。
阻止預設行為：event.preventDefault()（如阻止表單提交）。

5. 非同步程式設計
   JavaScript 的非同步處理是全端開發的關鍵，特別在與後端 API 交互時。

回調函數（Callback）：

早期方式，易導致「回調地獄」。
示例：
javascriptsetTimeout(() => console.log("延遲 1 秒"), 1000);

Promise：

狀態：pending、fulfilled、rejected。
方法：then、catch、finally。
示例：
javascriptfetch("https://api.example.com/data")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Async/Await（ES6+）：

基於 Promise 的語法糖，簡化非同步程式碼。
示例：
javascriptasync function getData() {
try {
let response = await fetch("https://api.example.com/data");
let data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
getData();

6. ES6+ 現代特性
   ES6（2015）及後續版本引入了許多現代化特性，作為全端工程師必須熟悉：

箭頭函數：() => {}，簡潔語法，無自己的 this。
解構賦值：
javascriptlet { name, age } = { name: "Alice", age: 25 }; // name = "Alice", age = 25
let [a, b] = [1, 2]; // a = 1, b = 2

模板字面量：使用反引號 Hello, ${name}!。
展開運算子（Spread Operator）：
javascriptlet arr1 = [1, 2];
let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

模組化：

匯出：export const func = () => {};
匯入：import { func } from "./module.js";

類（Class）：
javascriptclass Person {
constructor(name) {
this.name = name;
}
greet() {
return Hello, ${this.name};
}
}
let p = new Person("Alice");
console.log(p.greet()); // Hello, Alice

7. 最佳實踐與注意事項

作用域與閉包：

理解塊作用域（let/const）和閉包（內部函數訪問外部變數）。
示例：
javascriptfunction outer() {
let x = 10;
return function inner() {
console.log(x);
};
}
let fn = outer();
fn(); // 10

錯誤處理：

使用 try...catch 處理異常。
示例：
javascripttry {
let data = JSON.parse(invalidJson);
} catch (e) {
console.error("解析錯誤:", e);
}

性能優化：

避免全局變數污染，使用模組化。
減少 DOM 操作，使用事件委派。
示例（事件委派）：
javascriptdocument.querySelector("ul").addEventListener("click", e => {
if (e.target.tagName === "LI") {
console.log(e.target.textContent);
}
});

安全考量：

防範 XSS：避免直接插入用戶輸入到 innerHTML，使用 textContent。
清理事件監聽器：element.removeEventListener()。

跨瀏覽器相容：

測試主流瀏覽器（Chrome、Firefox、Safari）。
使用 Polyfill 或 Babel 支援舊瀏覽器（如 IE11）。

8. 全端視角：與後端整合
   作為全端工程師，JavaScript 常與後端交互：

API 請求：使用 fetch 或 axios 與後端（如 Node.js/Express）通信。
javascriptasync function postData() {
let response = await fetch("/api/users", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: "Alice" })
});
let result = await response.json();
console.log(result);
}

動態渲染：在後端模板（如 EJS、Pug）中嵌入 JavaScript，或在前端框架（如 React）中處理動態內容。
Node.js：學習伺服器端 JavaScript，理解事件循環、模組系統（如 CommonJS、ES Modules）。

實用範例
以下是一個簡單的範例，結合 DOM 操作、事件處理和非同步請求，模擬一個動態載入用戶資料的頁面。
HTML
html
載入用戶

loadBtn.addEventListener("click", async () => {
try {
// 模擬 API 請求
const response = await fetch("https://jsonplaceholder.typicode.com/users");
const users = await response.json();

    // 清空列表
    userList.innerHTML = "";

    // 動態生成列表
    users.forEach(user => {
        const li = document.createElement("li");
        li.textContent = user.name;
        userList.appendChild(li);
    });
} catch (error) {
    console.error("載入失敗:", error);
    userList.innerHTML = "<li>載入失敗</li>";
}

});
講解

事件監聽：點擊按鈕觸發非同步請求。
非同步處理：使用 async/await 從公開 API 獲取用戶資料。
DOM 操作：動態生成 元素，顯示用戶名稱。
CSS Grid：將用戶列表以響應式網格排列。
錯誤處理：捕獲網絡錯誤並顯示提示。

學習與實踐建議

練習專案：

創建一個待辦事項應用：實現新增、刪除、標記完成（結合 DOM 和陣列操作）。
構建一個簡單的 API 客戶端：從公開 API（如 JSONPlaceholder）獲取數據並顯示。
實現表單驗證：即時檢查輸入（如 email 格式）並給出反饋。

工具與資源：

使用 Chrome DevTools 調試 JavaScript（檢查變數、斷點）。
學習框架（如 React、Vue）前，確保熟悉原生 JavaScript。
參考 MDN Web Docs 或 JavaScript.info 深入學習。

常見問題：

this 混亂：箭頭函數無自己的 this，使用普通函數時注意上下文。
非同步失敗：檢查 Promise 是否正確解析，確保 await 用於 async 函數內。
性能問題：避免過多 DOM 操作，使用事件委派或批量更新。